<template>
  <div class="article_page">
    <div class="common_form_search">
      <el-form :inline="true" :model="articleFrom">
        <el-form-item label="文章标题">
          <el-input v-model="articleFrom.article_title" placeholder="请输入文章标题" clearable />
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="articleFrom.status" placeholder="全部" clearable>
            <el-option label="已发布" value="1" />
            <el-option label="未发布" value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="发布平台栏目">
          <el-select v-model="articleFrom.parentid" placeholder="全部" clearable>
            <el-option v-for="item in topTypeList" :key="item.id" :label="item.type_name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="发布时间">
          <my-date-picker ref="myDatePicker" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="onSubmit()">查询</el-button>
          <el-button size="small" @click="onReset()">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-divider />
    <div class="flex align-center table-top-btns">
      <h5 class="flex align-center">
        <svg-icon style="margin-right:15px" icon-class="list" :size="15" />数据列表
      </h5>
      <el-button v-if="$hasMethod('#add')" size="small" class="add-btn" icon="el-icon-plus" @click="$router.push({ name: 'articlePlatformAdd', params: { type: 'add' } })">发布文章</el-button>
    </div>
    <div>
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="70" />
        <el-table-column prop="article_title" label="文章标题" width="260" />
        <el-table-column prop="type_name" label="发布平台栏目" width="240" />
        <el-table-column prop="author" label="作者" />
        <el-table-column prop="publish_time" label="发布时间" width="100" />
        <el-table-column prop="recommend" label="推荐" width="280">
          <template slot-scope="scope">
            <span style="margin-right: 10px">
              <el-button v-if="$hasMethod('#enableHome')" size="mini" :type="scope.row.home_recommend == 1 ? 'primary' : 'info'" @click="changeRecommend('home', scope.row.id, scope.row.home_recommend)">首页推荐</el-button>
              <el-button v-else size="mini" :type="scope.row.home_recommend == 1 ? 'primary' : 'info'">首页推荐</el-button>
            </span>
            <span>
              <el-button v-if="$hasMethod('#enableHot')" size="mini" :type="scope.row.hot_recommend == 1 ? 'primary' : 'info'" @click="changeRecommend('hot', scope.row.id, scope.row.hot_recommend)">热门推荐</el-button>
              <el-button v-else size="mini" :type="scope.row.hot_recommend == 1 ? 'primary' : 'info'">热门推荐</el-button>
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="platform" label="展示平台" width="120">
          <template slot-scope="scope">
            <p class="show_icons">
              <span v-if="scope.row.pc_show == 1" class="inline-block pc_icon" />
              <span v-if="scope.row.h5_show == 1" class="inline-block h5_icon" />
              <span v-if="scope.row.xcx_show == 1" class="inline-block xcx_icon" />
            </p>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template slot-scope="scope">
            <el-tag v-if="$hasMethod('#enable')" class="pointer" :type="scope.row.status == 1 ? 'success' : 'danger'" @click="changeRecommend('status', scope.row.id, scope.row.status)">
              {{ scope.row.status == 1 ? "已发布" : "未发布" }}
            </el-tag>
            <el-tag v-else :type="scope.row.status == 1 ? 'success' : 'danger'">
              {{ scope.row.status == 1 ? "已发布" : "未发布" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <el-button v-if="$hasMethod('#edit')" type="primary" size="mini" @click="$router.push({ name: 'articlePlatformAdd', params: { type: 'edit', editId: scope.row.id }, })">编辑</el-button>
            <el-button v-if="$hasMethod('#delete')" type="danger" size="mini" @click="handleBtn(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <custom-page ref="customPage" :total="total" @getList="getTableLists(searchObj)" />
    </div>
  </div>
</template>

<script>
import { getInfoTypeList } from '@/api/web'
import customPage from '@/components/customPage'
import myDatePicker from '@/components/myDatePicker'
import {
  getArticleList,
  delArticle,
  editHome,
  editHot,
  editStatus
} from '@/api/article'
export default {
  components: { customPage, myDatePicker },
  data() {
    return {
      articleFrom: {
        article_title: '',
        status: '',
        parentid: '',
        publish_time: ''
      },
      topTypeList: [],
      tableData: [],
      total: 0,
      handleId: '',
      searchObj: {}
    }
  },
  mounted() {
    this.getTopType()
    this.getTableLists()
  },
  methods: {
    getTopType() {
      getInfoTypeList().then((res) => {
        this.topTypeList = res
      })
    },
    getTableLists(articleFrom) {
      const { page, pageSize } = this.$refs.customPage
      const obj = {
        page,
        pageSize,
        ...articleFrom
      }
      getArticleList(obj).then((res) => {
        this.tableData = res.data
        this.total = res.total
      })
    },
    changeRecommend(type, id, recommend) {
      if (type === 'home') {
        editHome({ id: id, home_recommend: recommend === 1 ? '2' : '1' }).then(
          (res) => {
            this.getTableLists()
          }
        )
      } else if (type === 'hot') {
        editHot({ id: id, hot_recommend: recommend === 1 ? '2' : '1' }).then(
          (res) => {
            this.getTableLists()
          }
        )
      } else {
        editStatus({ id: id, status: recommend === 1 ? '2' : '1' }).then(
          (res) => {
            this.getTableLists()
          }
        )
      }
    },
    handleBtn(id) {
      this.$confirm('您确定要删除吗?', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        delArticle(id).then((res) => {
          this.getTableLists()
        })
      }).catch(() => { })
    },
    onSubmit() {
      const pickerVal = this.$refs.myDatePicker.getVal()
      if (pickerVal !== 'error') {
        this.articleFrom.publish_time = pickerVal
        this.searchObj = { ...this.articleFrom }
        this.$refs.customPage.page = 1
        this.getTableLists(this.searchObj)
      }
    },
    onReset() {
      if (this.$refs.myDatePicker) {
        this.$refs.myDatePicker.reset()
      }
      this.articleFrom = Object.assign({})
      this.getTableLists()
    }
  }
}
</script>

<style lang="scss" scoped>
.content_wrap .el-range-editor.el-input__inner {
  width: 400px;
}

.el-tag.el-tag--success {
  background-color: #e8f5ee;
  border-color: #4cca86;
  color: #4cca86;
}

.el-tag.el-tag--danger {
  background-color: #ffeaec;
  border-color: #ff4146;
  color: #ff4146;
}

.table_titlle {
  height: 70px;
  line-height: 70px;

  span {
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #333333;
    margin: 0 50px 0 15px;
  }
}

.show_icons {
  line-height: 24px;

  span {
    width: 20px;
    height: 20px;
    margin-left: 10px;
    background-repeat: no-repeat;
    background-size: cover;
  }

  .pc_icon {
    background-image: url("../../assets/images/pc.png");
  }

  .h5_icon {
    background-image: url("../../assets/images/h5.png");
  }

  .xcx_icon {
    background-image: url("../../assets/images/alipay-xcx.png");
  }
}
</style>
